<template>
	<view class="box">
		<!-- 商品轮播图 -->
		<view class="swiper">
			<!-- <swiper :indicator-dots="true" :autoplay="true" :interval="3000" indicator-active-color="#fff"
				indicator-color="rgba(255,255,255,.5)" :duration="1000">
				<swiper-item v-for="(item,index) of info.slider_image" :key="index"
					@click="prevImg(item,info.slider_image)">
					<view class="swiper-item">
						<image :src="item" mode="aspectFill"></image>
					</view>
				</swiper-item>
			</swiper> -->
				<u-swiper
				indicatorActiveColor='#fff'
				indicatorInactiveColor='rgba(255,255,255,.5)'
					:list="videoAndImage"
					keyName="url"
					:autoplay="autoplay"
					height='560rpx'
					@click='autoplayNo'
					@change='autoplayYes'
				></u-swiper>
			
		</view>
		<!-- 秒杀活动 -->
		<view class="skill" v-if="info.product_type==1">
			<!-- 背景图片 -->
			<view class="skill-bg f-w">
				<image src="https://jw.xzsw2021.com/static/client/tu_67@2x.png" mode=""></image>
			</view>
			<!-- 内容 -->
			<view class="skill-box fw-bt">
				<view class="sk-left f-w">
					<view class="f22">秒杀价</view>
					<view class="newprice f24">￥<text class="f36 bold">{{info.price}}</text></view>
					<view class="oldprice">￥{{info.ot_price}}</view>
				</view>
				<view class="sk-right">
					<view class="sk-right2" v-if="info.seckill_status">
						<view class="sk-right-desc">距秒杀结束还剩</view>
						<u-count-down :time="info.stopMillisecond" format="DD:HH:mm:ss" autoStart millisecond
							@change="onChange">
							<view class="f-w">
								<!-- <view class="s1">{{timeData.days }}</view>
								<view class="s2">天</view> -->
								<view class="s1">{{timeData.hours>10?timeData.hours:'0'+timeData.hours}}</view>
								<view class="s2">时</view>
								<view class="s1">{{timeData.minutes}}</view>
								<view class="s2">分</view>
								<view class="s1">{{timeData.seconds}}</view>
								<view class="s2">秒</view>
							</view>
						</u-count-down>
					</view>
					<view class="sk-right1" v-else>
						未开始
					</view>

				</view>
			</view>
		</view>
		<!-- 今日秒杀-商品信息 -->
		<view class="msg" v-if="info.product_type==1">
			<!-- <view class="msg"> -->
			<view class="name f30 bold">
				{{info.store_name}}
			</view>
			<view class="two fw-bt">
				<view class="two2 f-w">
					<!-- 收藏 -->
					<view class="sc f-w" @click="checkSc">
						<image src="https://jw.xzsw2021.com/static/client/icon_76@2x.png" mode=""
							v-if="!info.isRelation" @click="shouCang">
						</image>
						<image src="https://jw.xzsw2021.com/static/client/icon_87@2x.png" mode="" v-else
							@click="cancelshouCang"></image>

					</view>
					<!-- 分享 -->
					<view class="fx f-w" @click="fenxiang">
						<image src="https://jw.xzsw2021.com/static/client/icon_89@2x.png" mode=""></image>
					</view>
				</view>

				<view class="two3">
					<!-- <my-numberBox :info="info" @cartDel='cartDel' @cartAdd='cartAdd'></my-numberBox> -->

					<!-- <view class="cart1-jian f-w" @click.stop="cartDel(item.id,index)" v-show="item.buy_num>0">
						<image src="https://jw.xzsw2021.com/static/client/icon_83@2x.png" mode="widthFix"></image>
					</view>
					<input type="number" v-model="item.buy_num" v-show="item.buy_num>0">
					<view class="cart1-add f-w" @click.stop="cartAdd(item.id,index)">
						<image src="https://jw.xzsw2021.com/static/client/icon_84@2x.png" mode="widthFix"></image>
					</view> -->
				</view>


			</view>
		</view>
		<!-- 商品信息 -->
		<view class="msg" v-if="info.product_type!=1">
			<view class="name f30 bold">
				{{info.store_name}}
			</view>
			<view class="two fw-bt">
				<view class="two1 hide-line">{{info.store_info}}</view>
				<view class="two2 f-w">
					<!-- 收藏 -->
					<view class="sc f-w">

						<image src="https://jw.xzsw2021.com/static/client/icon_76@2x.png" mode=""
							v-if="!info.isRelation" @click="shouCang">
						</image>
						<image src="https://jw.xzsw2021.com/static/client/icon_87@2x.png" mode="" v-else
							@click="cancelshouCang"></image>


					</view>
					<!-- 分享 -->
					<view class="fx f-w" @click="fenxiang">
						<image src="https://jw.xzsw2021.com/static/client/icon_89@2x.png" mode=""></image>
					</view>
				</view>
			</view>
			<!-- 普通价 -->
			<view class="price fw-bt">
				<view class="price-l f-w">
					<view class="red">￥<text class="f36 bold">{{info.price}}</text></view>
					<view class="oprice" v-if='info.ot_price'>￥{{info.ot_price}}</view>
				</view>
				<!-- 按钮 -->
				<view class="price-r f-w">
					<view class="price-r1" @click="delPrice">价高点我</view>
					<!-- <view class="price-r2" @click="cartAdd">加入购物车</view> -->
					<!--  -->
					<rules :product='info' :callbackFunction='componentUpdateCart'>
						<view class="price-r2">加入购物车</view>
					</rules>

				</view>
			</view>
			<!-- 会员价 -->
			<view class="price2 f-w f24" style="flex-wrap: wrap;">
				<block v-for="(item,index) in info.PlusPrice" :key='index' v-if="index == 0">
					<view class="red">￥<text class="f34">{{item.price}}</text></view>
					<view class="plus">
						<view class="f20">{{item.grade_name}}</view>
					</view>
				</block>
			</view>
			<view class="">

			</view>

			<!-- 配送 -->
			<view class="peisong" v-if="info.tem && (info.temp.name || info.temp.info)">配送说明:
				{{info.temp.name|| ''}}{{info.temp.info?info.temp.info:''}}
			</view>
			<!-- <view class="peisong" v-if="!info.tem">配送说明: {{info.temp.name}}{{info.temp.info?info.temp.info:''}}</view> -->
		</view>
		<!-- 搭配购买 -->
		<view class="dapei" v-if="collocationProudct.length > 0">
			<view class="title f28 bold">搭配购买</view>
			<scroll-view scroll-x="true" class="scroll">
				<view class="list f-w">
					<view class="demo" v-for="(item,index) of collocationProudct" :key="index"
						@click="goShopDetail(item.assistant_id)">
						<view class="shop-img f-w">
							<image :src="item.assistant_image" mode=""></image>
						</view>
						<view class="shop-name hide-line2">
							{{item.CollocationProduct.store_name}}
						</view>
						<view class="shop-price fw-bt">
							<view class="shop-p1 f-w">
								<view class="red f20">￥<text class="f24 bold">{{item.assistant_price}}</text></view>
								<view class="oprice">￥{{item.CollocationProduct.price}}</view>
							</view>
							<!--  -->
							<view class="shop-p2" @click.stop="addCart">
								<image src="https://jw.xzsw2021.com/static/client/icon_84@2x.png" mode=""></image>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<!-- 进店逛逛 -->
		<view class="shop fw-bt">
			<view class="shop-l f-w" @click="goShopping">
				<view class="i1 f-w">
					<image src="https://jw.xzsw2021.com/static/client/icon_107@2x.png" mode="heightFix"></image>
				</view>
				<view class="bold n1">进店逛逛</view>
				<view class="i2 f-w">
					<image src="https://jw.xzsw2021.com/static/client/icon_108@2x.png" mode="heightFix"></image>
				</view>
			</view>
			<view class="shop-r f-w" @click="callKefu">
				<view class="i3 f-w">
					<image src="https://jw.xzsw2021.com/static/client/icon_109@2x.png" mode="heightFix"></image>
				</view>
				<text>联系客服</text>
			</view>
		</view>

		<view class="shop fw-bt" @click="gowenda">
			<view class="shop-l f-w">

				<view class="bold n1" style="margin: 0;">家味问答</view>

			</view>
			<view class="shop-r f-w">
				<view class="i2 f-w">
					<image src="https://jw.xzsw2021.com/static/client/icon_108@2x.png" mode="heightFix"></image>
				</view>
			</view>
		</view>


		<!-- 用户评价 -->
		<view class="evaluation">
			<view class="fw-bt">
				<view class="title f28 bold" v-if="info.replayData.count == 0">暂无评价</view>
				<view class="title f28 bold" v-else>用户评价{{info.replayData.count}}</view>
				<view class="all red f-w" @click="goAlleval">
					<view>查看全部</view>
					<view class="all-r f-w">
						<image src="https://jw.xzsw2021.com/static/client/icon_93@2x.png" mode=""></image>
					</view>
				</view>
			</view>
			<!-- 评价内容 -->
			<view class="econtent flex" v-for="(item,index) in pjlist.list" :key='index'>
				<view class="head-img">
					<image :src="item.avatar" mode=""></image>
				</view>
				<view class="eright">
					<view class="one fw-bt">
						<view class="f30 bold">{{item.nickname}}</view>
						<view class="time">{{item.create_time}}</view>
					</view>
					<!-- 评分 -->
					<view class="rate">
						<uni-rate :value="item.rate" size="12" color="#bbb" active-color="#FCA55E" :readonly="true"
							:is-fill="false" />
					</view>
					<!-- 文字 -->
					<view class="econ hide-line2">
						<text>{{item.comment}}</text>
					</view>
					<view class="four flex">
						<view class="er-img" v-for="(item2,index2) in item.pics" :key="index2">
							<!-- <image :src="item2" mode="aspectFill" @click="prew(item2,item.pics)"></image> -->
							<image :src="item2" mode="aspectFill" @click="prew(item2,item.pics)"
								v-if="isImageType(item2)"></image>
							<video :src="item2" v-else style="width: 180rpx;height: 180rpx;"></video>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 商品详情 -->
		<view class="detail">
			<view class="title f28 bold">商品详情</view>
			<!-- 富文本 -->
			<!-- <view class="rich" v-html="info.content.content"></view> -->
			<u-parse :content="info.content.content" :tagStyle="productDetailSytle"></u-parse>

		</view>

		<!-- 购物车 -->
		<cart :list="carlist" @change='cartcancel' @buy='goOrderCheck' :product="info"></cart>
		<coupons ref="coupons" :quan_list="couponlist" @getid='getid'></coupons>
		<!-- 海报弹窗 -->
		<uni-popup ref="popup" type="center" :is-mask-click="true" :mask-click='true'>
			<view class="pop">
				<view>
					<!-- <canvas class="canvas" canvas-id='myCanvas' v-if="canvasStatus"></canvas> -->
					<image :src="path" mode=""></image>
					<l-painter :board="poster" :pixel-ratio='4' @success="IsOk" isRenderImage
						custom-style="position: fixed; left: 9999rpx" />
				</view>
				<view class="btn fw-bt">
					<view class="btn1">
						<button type="default" @click="downLoadHb">下载海报</button>
					</view>
					<view class="btn2">
						<button type="default" open-type="share" @click="shareHb">分享商品</button>
					</view>
				</view>
			</view>
		</uni-popup>
		<!-- 加入购物车弹窗 -->
		<uni-popup ref="popup2" type="bottom">
			<view class="pop2">
			</view>
		</uni-popup>
		<!-- 直播 -->
		<view class="live" @click="goLive('1')">
			<image src="https://jw.xzsw2021.com/static/client/icon_94@2x.png" mode=""></image>
			<view class="live-text">直播</view>
		</view>
	</view>
</template>

<script>
	import cart from '@/components/cart.vue'
	import lPainter from '@/components/lime-painter/index.vue'
	import {
		getProudctQrCodeApi,
		getProudctCollocationApi
	} from '@/api/product.js'
	import {
		PosterCanvas,
		fileStoreImage
	} from '@/api/public.js'
	import Cache from '@/util/cache.js'
	import rules from '@/components/rules.vue'
	export default {
		components: {
			cart,
			lPainter,
			rules
		},
		data() {
			return {
				productDetailSytle: 'width:100%;display:block;',
				carlist: [],
				videoAndImage:[],
				autoplay:true,
				djs: '',
				couponlist: [],
				pjlist: [],
				info: '',
				orign: '', //满汉任务分享
				id: '', //商品id
				isFromMer: 0, //是否由店铺过来的商品详情 0不是，其他值为店铺id。如果不为0则只显示该店铺的购物车商品
				isSc: false, //
				num: 10, //
				date: '', //倒计时时间
				// banner_list: [{
				// 		img: 'https://jw.xzsw2021.com/static/index/tu_18@2x.png'
				// 	},
				// 	{
				// 		img: 'https://jw.xzsw2021.com/static/client/icon_60@2x.png'
				// 	},
				// 	{
				// 		img: 'https://jw.xzsw2021.com/static/client/icon_103@2x.png'
				// 	}
				// ], //
				path: '',
				choosecart: [],
				poster: {}, //海报
				type: '', //商品类型 1.秒杀类 3.兑换类
				timeData: {},
				canvasStatus: false, //海报绘图标签
				posterbackgd: '/static/img/posterbackgd.png',
				arr2: ['/static/img/posterbackgd.png'],
				collocationProudct: [], //搭配商品
				userinfo: "",
				qrcode: ""
			}
		},
		onShareAppMessage(options) {
			console.log(options);
			let that = this;
			let shareObj = {
				title: '分享给好友',
				imageUrl: this.path,
				path: 'pages/client/shop/shop-detail/shop-detail?id=' + this.id + '&agent_id=' + 2,
				success: function(res) {
					// 转发成功之后的回调
					if (res.errMsg == 'shareAppMessage:ok') {}
				},
				fail: function() {
					// 转发失败之后的回调
					if (res.errMsg == 'shareAppMessage:fail cancel') {
						// 用户取消转发
					} else if (res.errMsg == 'shareAppMessage:fail') {
						// 转发失败，其中 detail message 为详细失败信息
					}
				},

			}
			// 来自页面内的按钮的转发
			if (options.from == 'button') {
				var eData = options.target.dataset;
				console.log(eData.name); // shareBtn
				// 此处可以修改 shareObj 中的内容
				shareObj.imageUrl = that.path;
			}
			return shareObj;
		},
		onLoad(options) {
			this.id = options.id ? options.id : '';
			this.orign = options.orign ? options.orign : '';
			this.isFromMer = options.mer_id ? options.mer_id : 0
			if (options.type) { //商品类型 1秒杀 
				this.type = options.type
				console.log('类型', this.type);
			}
			if (options.spread_spid) {
				Cache.set('spread_spid', options.spread_spid)
			}

			// this.getgoodsinfo()
			// this.getcoupon()
			// this.getgoodsval()
			// this.getuserinfo()
		},
		onHide() {
			this.endInter()
		},
		onUnload: function() {
			this.endInter()
		},
		onShow() {
			this.seegoods()

			this.getgoodsinfo()
			this.getcoupon()
			this.getgoodsval()
			this.getuserinfo()
		},
		methods: {
			autoplayNo(){
				this.autoplay = false
			},
			autoplayYes(){
				this.autoplay = true
			},
			
			//  获取二维码
			getqrcode() {
				let data = {
					type: 'routine',
					product_type: 0
				}
				getProudctQrCodeApi(this.id, data).then(res => {
					this.qrcode = res.data.url
				})
			},
			// let data = {
			// 	type: 'routine',
			// 	product_type: this.info.product_type
			// }
			// getProudctQrCodeApi(this.id, data).then(res => {
			getuserinfo() {
				this.$request('user', {}, 'GET').then(res => {

					this.userinfo = res.data
				})
			},
			// 跳转问答
			gowenda() {
				uni.navigateTo({
					url: "/pages/user/banquest/wenda/wenda?id=" + this.id
				})
			},
			isImageType(str) {
				console.log(str)
				var index = str.lastIndexOf('.') // 获取指定字符串最后一次出现的位置，返回index
				var str = str.substr(index + 1)
				return ['png', 'jpg', 'jpeg', 'bmp', 'gif', 'webp', 'psd', 'svg', 'tiff'].indexOf(str.toLowerCase()) !== -1
			},
			onChange(e) {
				this.timeData = e
			},
			prew(c, arr) {
				uni.previewImage({
					current: c,
					urls: arr
				})
			},
			// 获取商品的评价
			getgoodsval() {
				uni.showLoading({
					mask: true
				})
				this.$request('store/product/reply/lst/' + this.id, {
					page: 1,
					limit: 1,
					type: 'count'
				}, 'GET').then(res => {
					if (res.status == 200) {
						this.pjlist = res.data
					}
				})

			},

			// 购物车
			cartcancel(e) {
				this.choosecart = e
				this.getgoodsinfo()
			},
			goOrderCheck(e) {
				
			},
			// 获取购物车的列表
			getcartlist() {
				let arr2 = []
				this.carlist = []
				let c = {}
				if (Cache.get('user_address', true) !== true) {
					c.address_id = Cache.get('user_address', true).address_id
				}
				this.$request('user/cart/lst', c, 'GET').then(res => {
					if (res.status == 200) {
						uni.hideLoading()
						let list = res.data.list
						// console.log(list, '@@@@@@@@@@@@@@@@')
						list.forEach(merCart => {
							if (this.isFromMer) { //是否由店铺到商品详情，店铺过来的只展示该店铺的购物车商品
								if (merCart.mer_id == this.info.merchant.mer_id) {
									merCart.list.forEach(cart => {
										console.log(cart,
											'----checkcheckcheckcheckcheck---------???')
										cart.check = true
										let choosecart = this.choosecart
										choosecart.forEach(itemc => {
											if (itemc.cart_id == cart.cart_id) {
												cart.check = itemc.check
											}
										})
									})
									this.carlist = merCart.list
								}
							} else { //非店铺过来展示全部
								merCart.list.forEach(cart => {
									if (cart.isRange) {
										cart.check = true
									} else {
										cart.check = false
									}
									let choosecart = this.choosecart ? this.choosecart : []
									choosecart.forEach(itemc => {
										if (itemc.cart_id == cart.cart_id) {
											cart.check = itemc.check
										}
									})
								})
								this.carlist.push(...merCart.list)
							}
							merCart.list.forEach(cart => {
								if (cart.product_id == this.id) {
									this.info.cartnum = cart.cart_num
									this.info.cart_id = cart.cart_id
								}

							})

						})
					}

				})
			},

			// 购物车减去
			cartDel(e) {

				uni.showLoading({
					mask: true
				})
				this.$request('user/cart/change/' + this.info.cart_id, {
					cart_num: this.info.cartnum - 1
				}).then(res => {
					if (res.status == 200) {
						uni.showToast({
							title: "添加成功"
						})
						this.getgoodsinfo()

					}
				})
			},


			// 购物车加
			cartAdd(e) {

				let a = Object.values(this.info.sku)
				let data = {
					cart_num: 1,
					is_new: 0,
					product_attr_unique: a[0].unique,
					product_id: this.id,
					product_type: this.info.product_type
				}
				uni.showLoading({
					mask: true
				})
				this.$request('user/cart/create', data).then(res => {
					if (res.status == 200) {
						uni.showToast({
							title: "添加成功"
						})
						this.getgoodsinfo()
					}
				})
			},
			// --------------------------------



			getid(e) {
				uni.showLoading({
					mask: true
				})
				this.$request('coupon/receive/' + e).then(res => {
					if (res.status == 200) {
						uni.hideLoading()
					}
					this.getcoupon()
				})
			},
			// 此商PIN的优惠券
			getcoupon() {
				this.$request('coupon/product', {
					ids: this.id
				}, 'GET').then(res => {
					res.data.forEach(item => {
						item.look = false
					})
					this.couponlist = res.data
				})
			},
			// 收藏
			shouCang() {
				let data = {
					type: this.info.product_type,
					type_id: this.id
				}
				uni.showLoading({
					mask: true
				})
				this.$request('user/relation/create', data).then(res => {
					if (res.status == 400 || res.status == 200) {
						uni.hideLoading()
						this.getgoodsinfo()
					}

				})
			},
			// 取消时间
			cancelshouCang() {
				let data = {
					type: this.info.product_type,
					type_id: this.id
				}
				uni.showLoading({
					mask: true
				})
				this.$request('user/relation/delete', data).then(res => {
					if (res.status == 400 || res.status == 200) {
						uni.hideLoading()
						this.getgoodsinfo()
					}

				})
			},
			getgoodsinfo() {
				let url = 'store/product/detail/' + this.id
				if (this.type == 1) {
					url = `store/product/seckill/detail/${this.id}`
				}
				this.$request(url, {}, 'GET').then(res => {
					this.info = res.data
					// this.info.slider_image[0] = res.data.video_link
					// if()
					this.videoAndImage;
					if(res.data.video_link){
						this.videoAndImage.push({
							url:res.data.video_link,
							title:'',
							poster:res.data.slider_image[0]
						})
					}
					this.info.slider_image.forEach(imageUrl=>{
						this.videoAndImage.push({
							url:imageUrl,
							title:''
						})
					})
					console.log(this.videoAndImage)
					if (res.data.product_type == 1) {
						res.data.stopMillisecond =
							Math.ceil(res.data.stop * 1000 - (new Date()).getTime())
					}
					this.getcartlist()
					this.getqrcode()
					return getProudctCollocationApi(this.id)
				}).then(res => {
					this.collocationProudct = res.data
				}).catch(err => {

				})

			},
			endInter: function() {

				let v = this.info

				clearInterval(v.timer);


			},
			// 大图预览
			prevImg(item, arr) {
				uni.previewImage({
					current: item,
					urls: arr,
					success() {

					},
					fail(err) {
						console.log(err);
					}
				})
			},
			// 切换收藏
			checkSc() {
				// 收藏 判断是否是满汉全席收藏
				this.isSc = !this.isSc;
				if (this.isSc) {
					this.$showToast('收藏成功')
				} else {
					this.$showToast('取消收藏')
				}
			},
			// 转发分享--生成海报
			fenxiang() {
				let This = this;
				let arr2 = []
				This.$set(This, 'canvasStatus', true);
				this.setBase()
				// uni.showLoading({
				// 	title: '海报生成中',
				// 	mask: true
				// });
				this.$refs.popup.open();
				// let data = {
				// 	type: 'routine',
				// 	product_type: this.info.product_type
				// }
				// getProudctQrCodeApi(this.id, data).then(res => {
				// 	This.path = res.data.url
				// 	uni.downloadFile({
				// 		url: This.posterbackgd,
				// 		success: function(res) {
				// 			This.$set(This.arr2, 0, res.tempFilePath)
				// 		}
				// 	});
				// 	uni.downloadFile({
				// 		url: This.info.image,
				// 		success: function(res) {
				// 			This.$set(This.arr2, 1, res.tempFilePath)
				// 		}
				// 	});
				// 	uni.downloadFile({
				// 		url: res.data.url,
				// 		success: function(res) {
				// 			This.$set(This.arr2, 2, res.tempFilePath)
				// 		}
				// 	});
				// 	console.log(This.arr2)
				// 	PosterCanvas(This.arr2, that.info.store_name, that.info.price, function(tempFilePath) {
				// 		console.log(tempFilePath)
				// 		// that.$set(that, 'posterImage', tempFilePath);
				// 		// that.$set(that, 'posterImageStatus', true);
				// 		// that.$set(that, 'actionSheetHidden', !that.actionSheetHidden);
				// 		// that.$set(that, 'canvasStatus', false);
				// 	}, (err) => {

				// 	});




				// }).catch(err => {

				// })

				// if(!this.path){
				// 	uni.showLoading({
				// 		title:'海报生成中...'
				// 	})
				// }

				// this.setBase()
			},
			// 价高点我
			delPrice() {
				console.log('价格');
				uni.navigateTo({
					url: '/pages/client/shop/question/question?id=' + this.id
				})
			},
			fileStoreImage(url) {
				// #ifdef MP  || APP-PLUS
				let ishttps = url.split('//')[0] == 'https:'
				if (!ishttps) {
					url = 'https://' + url.split('//')[1]
				}
				// #endif
				return new Promise((resolve, reject) => {
					let that = this;
					uni.downloadFile({
						url: url,
						success: function(res) {
							console.log(res, '3eeeeeeeeeeeee')
							resolve(res.tempFilePath);
						},
						fail: function() {
							uni.showToast({
								title: "添加成功"
							})
						}
					});
				})
			},
			// 看其他商品详情
			goShopDetail(id) {
				uni.navigateTo({
					url: '/pages/client/shop/shop-detail/shop-detail?id=' + id
				})
			},
			// 下载海报
			downLoadHb() {

				let that = this;
				uni.getImageInfo({
					src: that.path,
					success: function(image) {
						uni.saveImageToPhotosAlbum({
							filePath: image.path,
							success() {
								uni.showToast({
									title: "已保存",
									icon: "none"
								})
								that.$refs.popup.close();
							},
							fail(err) {
								console.log(err);
							}
						})
					}
				});



			},
			// 分享海报
			shareHb() {
				console.log('分享海报');

			},
			// 当前图片
			IsOk(e) {
				uni.hideLoading()
				this.path = e;
				console.log(e);

			},
			// 进店逛逛
			goShopping() {
				uni.reLaunch({
					url: '/pages/client/shop/shop?id=' + this.info.merchant.mer_id
				})
			},
			// 联系客服
			callKefu() {
				uni.makePhoneCall({
					phoneNumber: this.info.merchant.service_phone + ''
				})
				console.log('客服');
			},
			// 查看全部评价
			goAlleval() {
				uni.navigateTo({
					url: '/pages/client/shop/usereval/usereval?id=' + this.id
				})
			},
			// 直播
			goLive(id) {
				uni.switchTab({
					url: "/pages/live/live"
				})
			},
			// 延迟10秒看商品
			seegoods() {
				let that = this
				let keyName = `proudctBrowseId:${this.id}`
				let is = Cache.get(keyName)
				if (is) {
					return;
				}
				setTimeout(function() {
					that.$request('user/banquet/browse', {}, 'GET').then(res => {
						Cache.set(keyName, 1, 3600)

					})
				}, 10000)

			},
			componentUpdateCart() {
				this.$parent.getcartlist()
			},
			// 生成海报
			setBase() {
				this.poster = {
					width: "600rpx",
					height: "900rpx",
					paddingTop: "40rpx",
					paddingLeft: "30rpx",
					background: "#efffff",
					borderRadius: "20px",
					boxSizing: "border-box",
					views: [{
							src: this.userinfo.avatar,
							type: "image",
							css: {
								left: "30rpx",
								top: "40rpx",
								width: "80rpx",
								height: "80rpx",
								borderRadius: '50%',
							}
						},
						{
							type: "view",
							css: {
								position: "absolute",
								left: "120rpx",
								top: "40rpx",
								display: "inline-block"
							},
							views: [{
									text: this.userinfo.nickname,
									type: "text",
									css: {
										display: "block",
										color: "#333",
										fontSize: "28rpx",
										fontWeight: "bold"
									}
								},
								{
									text: "在家味菜市场为您精心挑选",
									type: "text",
									css: {
										color: "#333",
										fontSize: "28rpx",
										fontWeight: "bold"
									},
								}
							],
						},
						{
							src: this.info.image,
							type: "image",
							css: {
								position: "absolute",
								left: "30rpx",
								top: "157rpx",
								objectFit: "cover",
								width: "540rpx",
								height: "520rpx",

							}
						},
						{
							type: "view",
							css: {
								position: "absolute",
								left: "30rpx",
								top: "700rpx",

							},
							views: [{
									text: "￥",
									type: "text",
									css: {
										fontSize: "30rpx",
										lineHeight: "80rpx",
										color: "#F83535"
									},
								},
								{
									text: this.info.price,
									type: "text",
									css: {

										fontSize: "58rpx",
										fontWeight: "bold",
										color: "#F83535",
										// marginTop: "10rpx",
									},
								},
								// {
								// 	text: "限时秒杀",
								// 	type: "text",
								// 	css: {
								// 		verticalAlign: "baseline",
								// 		marginLeft: "10rpx",
								// 		fontWeight: "bold",
								// 		fontSize: "24rpx",
								// 		color: "#109C7A",
								// 	},
								// }
							],
						},
						{
							type: "view",
							css: {
								marginLeft: "30rpx",
								width: "400rpx",
								display: "inline-block"
							},
							views: [{
									text: this.info.store_name,
									type: "text",
									css: {
										display: "block",
										color: "#333",
										fontSize: "26rpx",

										// lineHeight: "40rpx",
									}
								},

							],
						},
						{

							src: this.qrcode,
							type: "image",
							css: {
								position: "absolute",
								left: "454rpx",
								top: "715rpx",
								width: "116rpx",
								height: "116rpx",
								objectFit: "cover",
								display: "inline-block"
							},
						}
					]
				}
			}
		}
	}
</script>
<style>
	page {
		background-color: #f5f5f5;
		padding-bottom: 100rpx;
	}
</style>

<style lang="scss" scoped>
	.detailimg img {
		width: 50%;
	}

	.box {
		// padding-bottom: 100rpx;

		.myimg {
			width: 100%;
			height: 100%;
		}

		.red {
			color: #F83535;
		}

		.swiper {
			width: 750rpx;
			height: 560rpx;

			swiper {
				width: 750rpx;
				height: 560rpx;

				.swiper-item {
					width: 750rpx;
					height: 560rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}

		}

		// 秒杀活动
		.skill {
			position: relative;
			width: 750rpx;
			height: 96rpx;

			.skill-bg {
				position: absolute;
				width: 750rpx;
				height: 96rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.skill-box {
				position: relative;
				width: 750rpx;
				height: 96rpx;
				z-index: 3;

				.sk-left {
					padding-left: 30rpx;
					color: #fff;
					font-size: 24rpx;

					.newprice {
						margin: 0 6rpx 0 10rpx;
					}

					.oldprice {
						text-decoration: line-through;
					}
				}

				.sk-right {
					height: 96rpx;
					font-size: 22rpx;
					color: #F83535;
					padding-right: 24rpx;

					.sk-right-desc {
						margin: 6rpx 0 10rpx;
					}

					.sk-right1 {
						padding-right: 40rpx;
						line-height: 96rpx;
						font-size: 32rpx;
					}

					.sk-right2 {

						.s1 {
							width: 36rpx;
							height: 36rpx;
							line-height: 36rpx;
							text-align: center;
							font-size: 24rpx;
							color: #fff;
							font-weight: bold;
							background: #F83535;
							border-radius: 8rpx;
						}

						.s2 {
							margin: 0 6rpx;
						}
					}
				}
			}
		}

		.msg {
			padding: 24rpx 30rpx;
			background-color: #fff;

			.two {
				margin-top: 15rpx;

				.two1 {
					width: 600rpx;
					color: #666;
					font-size: 22rpx;
				}

				.two2 {
					.sc {
						width: 33rpx;
						height: 30rpx;

						image {
							@extend .myimg;
						}
					}

					.fx {
						margin-left: 20rpx;
						width: 29rpx;
						height: 30rpx;

						image {
							@extend .myimg;
						}
					}
				}

				.two3 {
					height: 50rpx;

					input {
						width: 60rpx;
						margin: 0 10rpx;
						font-weight: 600;
						font-size: 28rpx;
						text-align: center;
					}

					.cart1-jian,
					.cart1-add {
						width: 40rpx;
						height: 40rpx;

						image {
							@extend .myimg;
						}
					}
				}
			}

			.price {
				font-size: 24rpx;
				color: #999;

				.oprice {
					margin-top: 8rpx;
					margin-left: 10rpx;
					text-decoration: line-through;
				}

				.price-r {
					margin-top: 25rpx;

					.price-r1 {
						font-size: 24rpx;
						color: #109C7A;
					}

					.price-r2 {
						margin-left: 40rpx;
						width: 150rpx;
						height: 50rpx;
						line-height: 50rpx;
						text-align: center;
						font-size: 24rpx;
						font-weight: bold;
						color: #FFFFFF;
						background: linear-gradient(64deg, #2BCCA5, #22B591);
						border-radius: 10rpx;
					}
				}
			}

			.price2 {
				.plus {
					position: relative;
					margin-top: 5rpx;
					margin-left: 10rpx;
					padding-left: 4rpx;
					width: 90rpx;
					height: 28rpx;
					line-height: 28rpx;
					color: #fff;

					text-align: center;
					background: url(https://jw.xzsw2021.com/static/client/icon_90@2x.png) no-repeat;
					background-size: 100% 100%;
					// image{
					// 	position: absolute;
					// 	top: 0;
					// 	left: 0;
					// 	width: 90rpx;
					// 	height: 27rpx;
					// 	z-index: -1;
					// }
				}
			}

			.peisong {
				margin-top: 24rpx;
				font-size: 22rpx;
				color: #666;
			}
		}

		// 搭配
		.dapei {
			margin-top: 20rpx;
			padding: 24rpx 30rpx 24rpx;
			border-radius: 12rpx;
			background-color: #fff;

			.scroll {
				margin-top: 24rpx;
			}

			.list {
				&>view:not(:first-child) {
					margin-left: 20rpx;
				}

				.demo {
					width: 190rpx;

					.shop-img {
						width: 189rpx;
						height: 173rpx;

						image {
							@extend .myimg;
						}
					}

					.shop-name {
						margin-top: 10rpx;
						font-size: 22rpx;
					}

					.shop-price {
						margin-top: 15rpx;

						.shop-p1 {
							font-size: 20rpx;
							color: #999;

							.oprice {
								margin-top: 4rpx;
								margin-left: 4rpx;
								text-decoration: line-through;
							}

						}

						.shop-p2 {

							width: 33rpx;
							height: 33rpx;

							image {
								@extend .myimg;
							}
						}
					}
				}
			}
		}

		// 今典逛逛
		.shop {
			margin-top: 20rpx;
			padding: 30rpx;
			border-radius: 12rpx;
			background-color: #fff;
			font-size: 28rpx;

			.i1 {
				width: 29rpx;
				height: 27rpx;

				image {
					@extend .myimg;
				}
			}

			.i2 {
				width: 15rpx;
				height: 27rpx;

				image {
					@extend .myimg;
				}
			}

			.i3 {
				margin-right: 4rpx;
				width: 23rpx;
				height: 30rpx;

				image {
					@extend .myimg;
				}
			}

			.n1 {
				margin: 0 10rpx;
			}
		}

		// 用户评价
		.evaluation {
			margin-top: 20rpx;
			padding: 30rpx;
			border-radius: 12rpx;
			background-color: #fff;

			.all {
				font-size: 24rpx;

				.all-r {
					margin-left: 10rpx;
					width: 13rpx;
					height: 24rpx;

					image {
						@extend .myimg;
					}
				}
			}

			.econtent {
				margin-top: 28rpx;

				.head-img {
					flex-shrink: 0;
					width: 80rpx;
					height: 80rpx;

					image {
						@extend .myimg;
						border-radius: 50%;
					}
				}

				.eright {
					margin-left: 30rpx;
					flex: 1;

					.time {
						color: #999;
						font-size: 22rpx;
					}

					.econ {
						margin-top: 30rpx;
						font-size: 26rpx;
						line-height: 40rpx;
					}

					.four {
						overflow: hidden;
						width: 580rpx;
						margin-top: 30rpx;

						&>view:not(:first-child) {
							margin-left: 20rpx;
						}

						.er-img {
							flex-shrink: 0;
							width: 180rpx;
							height: 180rpx;

							image {
								@extend .myimg;
							}
						}
					}
				}
			}
		}

		.detail {
			padding: 90rpx 0rpx;

			.rich {
				margin-top: 24rpx;
				height: 100rpx;
				background-color: #fff;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}

		// 海报弹窗
		.pop {
			// margin-top: 200rpx;
			width: 600rpx;
			height: auto;
			overflow: hidden;

			image {
				width: 600rpx;
				height: 900rpx;
				background-color: #fff;
				border-radius: 20rpx;
			}

			.btn {
				margin-top: 50rpx;
				padding: 0 33rpx;

				button {
					width: 240rpx;
					height: 70rpx;
					line-height: 70rpx;
					color: #fff;
					text-align: center;
					font-size: 28rpx;
					background: #109C7A;
					border-radius: 16rpx;
				}

			}
		}

		// 直播
		.live {
			position: fixed;
			right: 20rpx;
			bottom: 160rpx;
			width: 75rpx;
			height: 95rpx;
			text-align: center;
			line-height: 92rpx;
			font-size: 25rpx;
			font-weight: bold;
			color: #FFD44A;
			z-index: 11;

			// background: url('https://jw.xzsw2021.com/static/client/icon_94@2x.png') no-repeat;
			// background-size: 100% 100%;
			image {
				position: absolute;
				left: 0;
				top: 0;
				width: 75rpx;
				height: 95rpx;
			}

			.live-text {
				position: relative;
				z-index: 12;
			}
		}
	}
</style>
